<template>
  <div>
    <el-input style="position: relative;top: 0px;width: 300px;margin-left: 750px" placeholder="请输入搜索的关键字" v-model="wd">
      <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
    </el-input>
    <el-table :data="userArr">
      <el-table-column label="编号" type="index"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <el-avatar :src="'http://localhost:19283'+scope.row.imgUrl"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column label="管理员">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isAdmin==1"
                     size="mini"
                     type="success"
                     @click="handleChange(scope.row)">取消
          </el-button>
          <el-button v-else=""
                     size="mini"
                     type="warning"
                     @click="handleChange(scope.row)">设置
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.enable==1"
                     size="mini"
                     type="info"
                     @click="handleEnable(scope.$index, scope.row)">禁用
          </el-button>
          <el-button v-else=""
                     size="mini"
                     type="warning"
                     @click="handleEnable(scope.$index, scope.row)">解禁
          </el-button>

          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total= total>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "AdminIndexView",
  data() {
    return {
      userArr: [],
      wd: '',
      currentPage: 1, // 当前页码，与后端同步
      pageSize: 8, // 每页显示的数量，可以根据实际情况修改
      total: 0, // 总数量，从后端获取
      page : 1,
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`);
      this.page = currentPage;
      this.axios.get("http://localhost:19281/users/list/"+currentPage)
          .then((response)=>{
            if (response.data.state==20000){
              // pageData
              this.userArr = response.data.data.list;
            }
          })
    },
    handleEnable(i, user) {
      let u = {id: user.id, enable: user.enable ? 0 : 1};
      let data = this.qs.stringify(u)
      this.axios.post("http://localhost:19281/users/update/enable", data)
          .then((response) => {
            if (response.data.state == 20000) {
              if (!user.enable) {
                this.$message.success("用户" + user.nickname + "已被解除禁用");
                user.enable = 1;
              } else {
                this.$message.success("用户" + user.nickname + "已被禁用");
                user.enable = 0;
              }
            }
          })
    },
    handleChange(user) {
      //准备请求的数据，包含用户id和是否为管理员
      let u = {id: user.id, isAdmin: user.isAdmin ? 0 : 1};
      let data = this.qs.stringify(u)
      this.axios.post("http://localhost:19281/users/update/isAdmin", data)
          .then((response) => {
            if (response.data.state == 20000) {
              if (user.isAdmin) {
                this.$message.success("取消" + user.nickname + "的管理员状态");
                user.isAdmin = 0;
              } else {
                this.$message.success("设置" + user.nickname + "为管理员");
                user.isAdmin = 1;
              }
            }
          })
    },
    handleDelete(i, user) {
      if (confirm('确定删除此用户吗？')) {
        this.axios.post('http://localhost:19281/users/' + user.id + '/delete')
            .then((response) => {
              if (response.data.state == 20000) {
                this.handleCurrentChange(this.page);
                this.userArr.splice(i, 1);
              }
            })
      }
    },
    search() {
      if (this.wd.trim() == "") {
        this.$message.error("请输入搜索的关键字!")
        return
      }
      this.$router.replace('/admin/index?wd=' + this.wd)
    },
    loadContents() {
      let wd = new URLSearchParams(location.search).get('wd')
      console.log(wd)
      this.axios.get('http://localhost:19281/users/' + wd + '/search').then((response) => {
        if (response.data.state == 20000) {
          this.userArr = response.data.data.list
        }
      })
    }
  },
  mounted() {
    this.loadContents()
    this.axios.get("http://localhost:19281/users/list/"+this.currentPage)
        .then((response) => {
          if (response.data.state == 20000) {
            this.userArr = response.data.data.list;
            this.total=response.data.data.total;
          }
        })
  },
  beforeRouteUpdate(to, from, next) { //此方法在路由跳转之前执行，如果不执行里面的next则拦截此次跳转
    next()
    this.loadContents()
  }
}
</script>

<style scoped>

</style>